<template>
  <div class="addstudent">
    <el-row :gutter="30">
      <el-col :span="12">
        <el-row>
          单个添加
        </el-row>
        <el-row class="mt-10">

          <el-form ref="form" :model="form" label-width="80px" :rules="rules">

            <el-form-item label="学生姓名" prop="name">
              <el-input v-model="form.name" placeholder="学生姓名"></el-input>
            </el-form-item>

            <el-form-item label="学号" prop="studentId">
              <el-input v-model="form.studentId" placeholder="学号"></el-input>
            </el-form-item>

            <el-form-item label="性别" prop="sex">
              <el-radio v-model="form.sex" label="男">男</el-radio>
              <el-radio v-model="form.sex" label="女">女</el-radio>
            </el-form-item>

            <el-form-item label="手机号">
              <el-input v-model="form.phone" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="QQ">
              <el-input v-model="form.qq" placeholder="qq号"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="form.email" placeholder="邮箱"></el-input>
            </el-form-item>


            <el-form-item label="班级" required>
              <el-col :span="8">
                <el-form-item prop="college">
                  <el-select v-model="form.college" placeholder="请选择学院" style="width: 95%;" @change="getmajor">
                    <el-option
                      v-for="item in collage"
                      :key="item.colId"
                      :label="item.colname"
                      :value="item.colId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item prop="major">
                  <el-select v-model="form.major" placeholder="请选择专业" style="width: 95%;" @change="getclazz">
                    <el-option
                      v-for="item in majors"
                      :key="item.id"
                      :label="item.majorname"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="8">
                <el-form-item prop="clazzId">
                  <el-select v-model="form.clazzId" placeholder="请选择班级" style="width: 100%;">
                    <el-option
                      v-for="item in calzzs"
                      :key="item.clazzId"
                      :label="item.clazzName"
                      :value="item.clazzId">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="在校时间" required>
              <el-col :span="10">
                <el-form-item prop="admissionDate">
                  <el-date-picker type="date" placeholder="选择入学日期" v-model="form.admissionDate"
                                  style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>

              <el-col :span="14">
                <el-form-item prop="birthday" label="生日">
                  <el-date-picker placeholder="选择生日" v-model="form.birthday" style="width: 100%;"></el-date-picker>
                </el-form-item>
              </el-col>
            </el-form-item>

            <el-form-item label="备注">
              <el-input type="textarea" v-model="form.remarks"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm('form')">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>


        </el-row>
      </el-col>
      <el-col :span="12">
        <div> 批量添加</div>
        <el-row style="margin-top: 30px">
          <span>批量添加使用Excel表格</span>
        </el-row>
        <el-row style="margin-top: 30px">
          <el-button type="primary">点击下载模板样式</el-button>
        </el-row>
        <el-row style="margin-top: 30px">

        </el-row>
        <el-row style="margin-top: 30px">
          <el-upload
            class="upload-demo"
            action="http://localhost:8088/user/addstudentbeach"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="successinfo"
            :on-error="errorinfo"
            accept=".xls,.xlsx"
            multiple
            name="student"
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
            <div class="el-upload__tip">只能上传xls,xlsx文件</div>
          </el-upload>
        </el-row>
      </el-col>
    </el-row>

  </div>
</template>

<script>
    export default {
        name: "addstudent",
        data() {
            return {
                fileList: [],
                collage: [],
                majors: [],
                calzzs: [],
                form: {
                    name: '',
                    studentId: '',
                    sex: '男',
                    phone: '',
                    email: '',
                    qq: '',
                    major: '',
                    college: '',
                    clazzId: '',
                    admissionDate: '',
                    birthday: '',
                    remarks: '',

                },
                rules: {
                    name: [
                        {required: true, message: '请输入学生名字', trigger: 'blur'},

                    ],
                    studentId: [
                        {required: true, message: '请输入学生学号', trigger: 'blur'}
                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'change'},
                        {min: 1, max: 2, message: '长度在 1 到 2个字符', trigger: 'blur'}
                    ],
                    admissionDate: [
                        {type: 'date', required: true, message: '请选择日期', trigger: 'blur'}
                    ],
                    birthday: [
                        {type: 'date', required: true, message: '请选择时间', trigger: 'blur'}
                    ],
                    college: [
                        {required: true, message: '请选择所属学院', trigger: 'blur'},

                    ],
                    major: [
                        {required: true, message: '请选择专业', trigger: 'blur'},

                    ], clazzId: [
                        {required: true, message: '请选择所在班级', trigger: 'blur'},

                    ]

                }
            }
        },
        methods: {

            submitForm(formName) {
                var self = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$http.post(this.URL.api + `user/addstudentone`, self.form)
                            .then(res => {

                                if (res.data.flag) {
                                    this.$message({
                                        message: '添加成功',
                                        type: 'success'
                                    });
                                  self.form = {
                                    name: '',
                                    studentId: '',
                                    sex: '男',
                                    phone: '',
                                    email: '',
                                    qq: '',
                                    major: '',
                                    college: '',
                                    clazzId: '',
                                    admissionDate: '',
                                    birthday: '',
                                    remarks: '',

                                  }

                                }

                            })

                    } else {

                        return false;
                    }
                });
            },
            successinfo(response) {

                if (response.flag) {
                    this.$message({
                        message: '批量添加成功',
                        type: 'success'
                    });
                } else {
                    this.$message.error("添加失败");
                    this.fileList = [];
                }

            },
            errorinfo() {
                this.$message.error("添加失败");
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            getmajor(va) {
                var self = this;
                this.form.major = '';
                this.form.clazzId = '';
                this.$http.get(this.URL.api + "querybycolid?colid=" + va).then(function (response) {

                    self.majors = response.data.data;

                }).catch(function (response) {

                });
            },

            getclazz(va) {

                var self = this;

                this.form.clazzId = '';
                this.$http.get(this.URL.api + "querybymajorid?majorid=" + va).then(function (response) {

                    self.calzzs = response.data.data;

                }).catch(function (response) {

                });
            },

            onSubmit() {

            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            }
        },
        created() {
            var self = this;
            this.$http.get(this.URL.api + "queryallcollage").then(function (response) {

                self.collage = response.data.data;

            }).catch(function (response) {

            });
        }
    }
</script>

<style scoped>

</style>
